<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多集详情页</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="detail-page" id="detailPage">
    <div class="focusSwitch" id="switchPage">
      <div class="right-label">本视频版权来源于腾讯视频/极光TV</div>
      <div class="focusScroll page-content">
        <div class="focusScrollContent">
          <div class="focusScrollItem">
            <div class="content">
              <div class="focusWidget play-wid"></div>
              <div class="texts">
                <div class="title" id="qinyunian">庆余年第二季庆余年第二季庆余年第二季庆余年第二季</div>
                <div class="actor">主演：人民群众</div>
                <div class="jianjie">简介：该剧讲述了内卫府大阁领沈渡与刑部小书吏颜幸，因为一场乌龙替嫁再续前缘，先婚后爱携手破案的故事。</div>
                <!-- <img aria-flowto="" class="focusWidget banner"
                  src="http://10.5.2.17:3357/EPG/jsp/images/universal/film/poster/202409/20240909/60/202409090831071259ie.png" /> -->
                <div class="focusBox btn-list" f-cache="auto" id="boxanniu" f-cachedir="DOWN,UP" onblur="onLeaveBtns"
                  onfocus="onInBtns">
                  <div class="focusWidget btn-item" id="quanping">全屏</div>
                  <div class="focusWidget btn-item">订购VIP</div>
                  <div class="focusWidget btn-item">收藏</div>
                  <div class="focusWidget btn-item" id="share" onenter="framework.onPopup('switchDialog', true)">分享
                  </div>
                </div>
              </div>
            </div>
            <div class="xj-title focusBox" f-cache="tabs1">
              <div class="xj-item focusWidget" id="tabs1">选集</div>
              <div class="xj-item focusWidget" id="tabs2">共40集</div>
            </div>
            <div class="focusBox xuanji" id="xuanjiBox" f-cache="xuanji5"></div>
            <div class="focusScroll focusBox range-box" sequence="X" f-scroll="X" f-cache="range10">
              <div class="focusScrollContent" id="rangeBox"></div>
            </div>
          </div>
          <div class="vodlist-box focusScrollItem focusBox" f-sequencerow="6" f-cache="auto" id="boxVodList1"></div>
          <div class="vodlist-box focusScrollItem focusBox" f-sequencerow="6" f-cache="auto" id="boxVodList2"></div>
        </div>
      </div>
    </div>
    <div class="focusSwitch dialog" onback="framework.onPopup('switchDialog', false)" f-type="popup" id="switchDialog">
      <div class="dialog-content">
        <div class="dialog-btns focusBox">
          <div class="focusWidget btn-item" onenter="framework.onPopup('switchDialog', false)">确认</div>
          <div class="focusWidget btn-item" onenter="framework.onPopup('switchDialog', false)">取消</div>
        </div>
        <div class="dialog-btns focusBox">
          <div class="focusWidget btn-item" onenter="framework.onPopup('switchDialog', false)">确认1</div>
          <div class="focusWidget btn-item" onenter="framework.onPopup('switchDialog', false)">取消1</div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="../../focus2.2.js"></script>
<script>

  // getHtmlStr("boxVodList1")
  // getHtmlStr("boxVodList2")

  var framework = new LyFocusFrame("detailPage");
  framework.Utils.marquee.start("qinyunian")
  var _switch = framework.findSwitch("switchPage")

  var lxjList = []
  var _rangeList = []
  for (var i = 0; i < 4000; i++) {
    lxjList.push(i)
  }
  var _nowPageIndex = 0, nowPlayNumber = 0
  function rangeDataList(pageSize) {
    var _htmlstr = ""
    for (var i = 0; i < lxjList.length / pageSize; i++) {
      var _item = {
        index: i,
        start: (i * pageSize),
        end: (i + 1) * pageSize - 1,
        text: (i * pageSize) + 1 + " ~ " + (i + 1) * pageSize
      }
      var _id = 'range' + i
      _htmlstr += "" +
        '<div class="focusScrollItem">' +
        ' <div class="focusWidget range-item" pageIndex=' + i + ' onFocus="setPage" ondarkfocus="setPage" id="range' + i + '">' + _item.text + '</div>' +
        '</div>'
      _rangeList.push(_item)
    }
    document.getElementById("rangeBox").innerHTML = _htmlstr
    // setPage()
  }
  function setPage(ele) {
    setTimeout(function() {
      if (ele.target.id === ele.curWidget.id) return
      if (ele && ele.target.container) {
        var _pageIdx = ele.target.getAttr("pageIndex")
        _pageIdx = _pageIdx * 1
        if (_pageIdx !== _nowPageIndex) {
          _nowPageIndex = _pageIdx
          _switch.onSetDarkFocus("xuanji0")
        }
      }
      setPageHtml()
    }, 0);
  }
  function setPageHtml() {
    var _rangeItem = _rangeList[_nowPageIndex], _htmlstr = ""
    if (!_rangeItem) return
    for (var i = _rangeItem.start; i <= _rangeItem.end; i++) {
      var _id = 'xuanji' + (i - _rangeItem.start)
      _htmlstr += '<div class="focusWidget xuanji-item" onleft="onRangeLeft(' + i + ')" onright="onRangeRight(' + i + ')" id=' + _id + ' index=' + i + '>' + (i + 1) + '</div>'
    }
    document.getElementById("xuanjiBox").innerHTML = _htmlstr
    // setTimeout(function () {
    //   framework.findSwitch("switchPage").initCommonents()
    // }, 0);
  }
  function onRangeLeft(_idx, params) {
    if (params.target.id === "xuanji0") {
      _nowPageIndex = _nowPageIndex <= 0 ? _rangeList.length - 1 : _nowPageIndex - 1
      _switch.onSetDarkFocus("range" + _nowPageIndex)
      return "xuanji9"
    }
  }
  function onRangeRight(_idx, params) {
    if (params.target.id === "xuanji9") {
      _nowPageIndex = (_nowPageIndex >= (_rangeList.length - 1)) ? 0 : _nowPageIndex + 1
      _switch.onSetDarkFocus("range" + _nowPageIndex)
      return "xuanji0"
    }
  }
  function onLeaveBtns(ev) {
    console.log(ev, "leave");

  }
  function onInBtns(ev) {
    console.log(ev, "in");

  }
  function onShare(show) {
    framework.onPopup("switchDialog", show || false)
  }

  function getHtmlStr(_id = "boxVodList1") {
    var _str = ''
    for (let i = 0; i < 12; i++) {
      _str += '<div class="vodlist-item focusWidget" id="' + _id + '_' + i + '">' +
        '       <img src="https://img0.baidu.com/it/u=309659746,1825337634&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1204" alt="" srcset="">' +
        '       <div><div class="focusMarquee">凡人修仙传-风起天南</div></div>' +
        '     </div>'
    }
    document.getElementById(_id).innerHTML = _str
    return _str
  }
  rangeDataList(10)
  framework.findSwitch("switchPage").init()
</script>

</html>